<template>
    <div>
        <h3>筛选条件</h3>
        <div class="box">
            <div v-if="prop.indexOf('ids') != -1">
                <el-input v-model="query.ids" placeholder="通过id筛选"></el-input>
            </div>
            <div v-if="prop.indexOf('title') != -1">
                <el-input v-model="query.title" placeholder="通过标题筛选"></el-input>
            </div>
            <div v-if="prop.indexOf('time') != -1">
                <el-select v-model="query.time" placeholder="通过试卷时间筛选">
                    <el-option :label="item.label" :value="item.time" v-for="(item, index) in paperTimer" :key="index"></el-option>
                </el-select>
            </div>
            <div v-if="prop.indexOf('type') != -1">
                <el-select v-model="query.type" placeholder="通过类型筛选">
                    <el-option :label="item" :value="index" v-for="(item, index) in types" :key="index"></el-option>
                </el-select>
            </div>
            <div v-if="prop.indexOf('level') != -1">
                <el-select v-model="query.level" placeholder="通过难度筛选">
                    <el-option label="一星" :value="1"></el-option>
                    <el-option label="二星" :value="2"></el-option>
                    <el-option label="三星" :value="3"></el-option>
                    <el-option label="四星" :value="4"></el-option>
                    <el-option label="五星" :value="5"></el-option>
                </el-select>
            </div>
            <div>
                <el-button icon="el-icon-search" type="primary" @click="getData">查询</el-button>
            </div>
            <div>
                <el-button icon="el-icon-refresh" type="primary" @click="getData(query = {})">重置</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    props : {
        prop : {
            default : [],
            type : Array,
        }
    },
    data(){
        return {
            query : {}
        }
    },
    computed : {
        ...mapState(['types', 'limits', 'paperTimer'])
    },
    methods : {
        getData(){
            this.$emit('change', this.query)
        }
    }
}
</script>

<style lang="scss" scoped>
.box{
    margin: 10px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    &>div{
        margin: 5px;
        max-width: 40%;
    }
}
</style>